import styles from './index.module.scss';
import Icon from '@/components/Icon';
import NavBar from '@/components/Navbar';
import { useDispatch } from 'react-redux';
import { useParams } from 'react-router-dom';
import { useEffect } from 'react';
import { getArticleDetailByIdAction } from '@/store/action/article';

export default function Article() {
  const dispatch = useDispatch();
  // 💥
  const { id } = useParams<{ id: string }>();
  // 3.
  useEffect(() => {
    dispatch(getArticleDetailByIdAction(Number(id)));
  }, [id, dispatch]);

  return (
    <div className={styles.root}>
      <div className="root-wrapper">
        {/* 顶部导航栏 */}
        <NavBar right={<Icon type="icongengduo" />}>文章标题</NavBar>

        <div className="wrapper">
          <div className="article-wrapper">
            {/* 文章描述信息栏 */}
            <div className="header">
              <h1 className="title">{'文章标题'}</h1>

              <div className="info">
                <span>{'2020-10-10'}</span>
                <span>{10} 阅读</span>
                <span>{10} 评论</span>
              </div>

              <div className="author">
                <img src={''} alt="" />
                <span className="name">{'张三'}</span>
                <span className="follow">关注</span>
              </div>
            </div>

            {/* 文章正文内容区域 */}
            <div className="content">
              <div className="content-html dg-html">测试内容123</div>
              <div className="date">发布文章时间：{'2020-10-10'}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
